<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div>
      <div class="list-item" v-for="(item, i) in pageList" :key="i" style="background-color: lightgreen; margin: 10px auto; width: 300px;text-align:center;">
        <p>{{item.id}}</p>
        <p>{{item.nickname}}</p>
        <p>{{item.email}}</p>
        <p>{{item.created_at}}</p>
      </div>
    </div>


    <div class="upload-test">
      <el-upload
        class="upload-demo"
        action="/api/upload/file"
        :on-change="handleChange"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div>




    <div class="demo" style="border: 1px solid #ccc" v-html="ssString">
    
    
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
import instance from '@/request/index'
import { loadAdmin, addAdmin } from '@/request/admin/index'
const userName = 'communityName'
const communityName = 'communityName'
const roomName = 'roomName'
const weekDate = '3'
const stratTime = '2'
const endTime = '1'
const weekPrice = '24'
const dingjin = '24'

export default {
  name: 'Home',
  components: {
    HelloWorld,
  },
  data() {
    return {
      pageList:[],
      fileList: [], //文件列表
      ssString: "<!DOCTYPE html>\r\n" + 
  				"<html lang='en'>\r\n" + 
  				"\r\n" + 
  				"<head>\r\n" + 
  				"  <meta charset='UTF-8'>\r\n" + 
  				"  <title>Your UNINN account:Your UNINN order</title>\r\n" + 
  				"</head>\r\n" + 
  				"\r\n" + 
  				"<body>\r\n" + 
  				"<div style='width: 540px;box-shadow: 0 0 9px 3px #e4e4e4;margin: 0 auto'>\r\n" + 
  				"  <div style='height: 55px;line-height: 55px;background-color: #aa1b34;color: #fff;font-size: 26px'><span\r\n" + 
  				"    style='margin-left: 20px'>UNINN</span></div>\r\n" + 
  				"  <div style='height:417px;border: 1px solid #fff;background-color: #fff;'>\r\n" + 
  				"    <div style='width: 80%;margin: 0 auto'>\r\n" + 
  				"  								<span\r\n" + 
  				"                    style='color: #aa1b34;font-size: 24px;margin-top: 10px;display: inline-block'>Dear："+userName+"" + 
  				"  								</span>\r\n" + 
  				"      <div style='color: #000;font-size: 17px;margin-top: 10px;'>\r\n" + 
  				"        Property ：UNINN  "+communityName+""+ 
  				"      </div>\r\n" + 
  				"      <div style='color: #000;font-size: 17px;margin-top: 10px;'>" + 
  				"        Room Type ："+roomName+"" + 
  				"      </div>\r\n" + 
  				"      <div style='color: #000;font-size: 17px;margin-top: 10px;'>\r\n" + 
  				"        Week ："+weekDate+"Weeks "+stratTime+"-"+endTime+ 
  				"      </div>\r\n" + 
  				"      <div style='color: #000;font-size: 17px;margin-top: 10px;'>\r\n" + 
  				"        Weekly price ：£"+weekPrice+"" + 
  				"      </div>\r\n" + 
  				"      <div style='color: #000;font-size: 17px;margin-top: 10px;'>\r\n" + 
  				"        Reservation fee ：£"+dingjin+""+ 
  				"      </div>\r\n" + 
  				"      <div style='width:60%;margin: 20px auto 10px;color:#fff;background-color:#aa1b34;padding:15px;border-radius:15px'>\r\n" + 
  				"        Track your booking process and <br/>see your Tenancy Agreement\r\n" + 
  				"      </div>\r\n" + 
  				"      <!--<span style='font-size: 12px;color: #aa1b34;margin-top: 10px;display: inline-block'> UNINN-->\r\n" + 
  				"  				                <!--</span>-->\r\n" + 
  				"      <span style='font-size: 12px;margin-top: 10px;display: block'>\r\n" + 
  				"        <a style='color: #aa1b34;'  href='http://www.uninnstudent.com/'> http://www.uninnstudent.com/</a>\r\n" + 
  				"      </span>\r\n" + 
  				"      <div style='color: #000;font-size: 17px;margin-top: 10px;'>\r\n" + 
  				"        <img style='width: 100%' src='https://uninnstudent.com/englandrent-website/englandrent-image/guanggao.jpg' alt='https://uninnstudent.com/englandrent-website/englandrent-image/guanggao.jpg'>"+
  				"      </div>\r\n" + 
  				"    </div>\r\n" + 
  				"  </div>\r\n" + 
  				"  <div style='height: 45px;line-height: 45px;background-color: #aa1b34;color: #fff;font-size: 9px'><span\r\n" + 
  				"    style='margin-left: 20px'>© Copyright 2020 UNINN Student Accommodation</span></div>\r\n" + 
  				"</div>\r\n" + 
  				"</body>\r\n" + 
  				"\r\n" + 
  				"</html>;"
    }
  },

  created() {
    this.addOne();
    
    // this.loadOne();
  },
  mounted() {
    this.loadAdminList();
  },

  methods: {

    // 加载管理员列表
    loadAdminList() {
      instance({
        url: '/admin/list',
        method: 'get'
      })
      .then((res) => {
        console.log(res);
        this.pageList = res.data.data
      })
      .catch(err => {
        console.log(err)
      })
    },

    // 查询当前信息
    loadOne() {
      loadAdmin({
        id:2
      }).then( res => {
        console.log(res)
      }).catch( err => {
        console.log(err)
      })
    },

    // 添加一个人
    addOne() {
      const obj = {
        nickname: '网易3级号大佬',
        email: 'fenghuoshanlin@wangyi.com',
        password: '321321',
      }
      console.log('add new one:', obj);
      addAdmin(obj)
      .then((res) => {
        console.log(res);
      })
      .catch(err => {
        console.log(err)
      })

    },

    // 文件上传
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
  }
};
</script>
